<template>
  <div class="app-container">
    <div class="icon">
      <img class="zh-en" src="../../../assets/images/zh.png" alt="" />
      <img class="zh-en" src="../../../assets/images/en.png" alt="" />
    </div>
    <el-table :data="SysAgreementData" style="width: 100%">
      <el-table-column prop="title" align="center" label="文章标题">
      </el-table-column>
      <el-table-column prop="createTime" align="center" :label="$t('licence.titme')"> </el-table-column>
      <el-table-column prop="updateTime" align="center" :label="$t('licence.sys_dataTime')"> </el-table-column>

      <el-table-column prop="operation" :label="$t('licence.fau_operation')" width="180">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">{{
            $t('licence.fau_Toview')
          }}</el-button>
          <el-button type="text" size="small" @click="edit(scope.row)">{{
            $t('licence.edit')
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" v-model="dialogVisible" width="60%">
      <el-form ref="formref" :model="form" label-width="80px">
        <el-form-item :label="$t('licence.art_title')">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item :label="$t('licence.art_content')">
          <!-- <el-input  id="inputText" autosize type="textarea"  v-model="form.content"></el-input> -->
          <Editor v-model="form.content"></Editor>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('licence.cancel') }}</el-button>
        <el-button type="primary" @click="submitForm">{{
          $t('licence.determine')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script name="Article" setup lang="ts">
import { getSysAgreement, setSysAgreement } from "@/api/system/article/article";
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
      const userInfo = ref('') // 用户信息
      const dialogVisible = ref(false) //弹框
      const SysAgreementData = ref([]) //保存协议内容
      // 弹框内容
      const form = ref({
        title: "",
        content: "",
      })
      const formref=ref()
      const editData = ref({
        id:-1,
        type:-1,
      }) //保存文章信息
    // 获取用户信息
    userInfo.value = JSON.parse(localStorage.getItem("userInfo") as string);
    

    const getSysAgreementData = async ()=> {
      let res = await getSysAgreement();
      SysAgreementData.value = res.data;
    }
    getSysAgreementData();
    // 查看按钮
    const handleClick = (row:any) => {
      dialogVisible.value = true;
      form.value = row;
    }
    // 编辑
    const edit = (row:any) => {
      dialogVisible.value = true;
      form.value = row;
      editData.value = row;
    }
    // 确定按钮
    const  submitForm = async()=> {
      formref.value?.validate();
      let res = await setSysAgreement({
        id: editData.value.id,
        title: form.value.title,
        content: form.value.content,
        type: editData.value.type,
        languageType: 0,
      });
      ElMessage.success("提交");
      dialogVisible.value = false;
    }

</script>

<style scoped lang="scss">
.zh-en {
  width: 50px;
  height: 50px;
  cursor: pointer;
  margin: 0 10px;
}

.icon {
  display: flex;
  justify-content: end;
  margin-bottom: 20px;
}

.content-yincang {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

#inputText {
  height: 550px !important;
}</style>
